<!-- <template>
  <div style="overflow: hidden;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="数据源名称">
        <el-input v-model="form.name" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" size="mini">查询</el-button>
        <el-button type="primary" @click="reset" size="mini">重置</el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button type="primary" @click="add" size="mini">添加</el-button>
        <el-button type="danger" @click="handleDel()" size="mini"
          :disabled="this.multipleSelection.length < 1">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" class="my-table">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="connectionName" label="数据源名称" width="120">
      </el-table-column>
      <el-table-column prop="connectionType" label="数据源类型" width="120"> </el-table-column>
      <el-table-column prop="createdBy" label="创建人" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="createdTime" label="创建时间"> </el-table-column>
      <el-table-column prop="updatedBy" label="更新人"> </el-table-column>
      <el-table-column prop="updatedTime" label="更新时间"> </el-table-column>
      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row)" class="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <EditDataSource />
    <Pagination :totalSize="totalSize" />
  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import { mapActions, mapMutations, mapState } from 'vuex'
import { cloneDeep } from 'lodash'

import Pagination from '@/components/Pagination'
import EditDataSource from '@/components/EditDataSource'

@Component({
  components: {
    Pagination,
    EditDataSource
  },
  methods: {
    ...mapActions({
      getDataSourceList: 'GET_DATA_SOURCE_LIST', // 列表
      deleteDataSource: 'DELETE_DATA_SOURCE', // 删除
      getDataSourceById: 'GET_DATA_SOURCE_BY_ID', // 详情
    }),
    ...mapActions('EditDataSourceModal', {
      callEditDataSourceModal: 'CALL_MODAL',
    }),
  }
})

export default class DataSource extends Vue {
  list = []
  multipleSelection = []
  totalSize = 0
  params = {}
  form = {
    name: ''
  }

  // 新增
  add() {
    this.callEditDataSourceModal({ editInfo: { type: 'add', id: '' }, data: {} })
  }
  // 查询
  search() {
    this.queryDataSource()
  }
  // 重置
  reset() {
    this.form.name = ''
    this.queryDataSource()
  }

  // 获取列表
  async queryDataSource(val) {
    const pages = {
      pageNo: val?.pageNo || 1,
      pageSize: val?.pageSize || 10,
      connectionName: this.form.name,
      projectId: this.params.id
    }
    const res = await this.getDataSourceList(pages)
    this.totalSize = Number(res.result.total)
    this.list = cloneDeep(res.result.records)
  }

  // 多选
  handleSelectionChange(val) {
    this.multipleSelection = val;
  }

  // 编辑
  async handleEdit({ id }) {
    const res = await this.getDataSourceById(id)
    this.callEditDataSourceModal({ editInfo: { type: 'edit', id }, data: res.result })
  }

  // 删除
  handleDel(row) {
    this.$confirm(
      '您确定要删除此条数据吗？请注意，此操作无法还原。',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(async () => {
      this.confirmDelete(row)
    })
  }
  // 删除确认
  async confirmDelete(row) {
    try {
      let ids = row ? [row.id] : this.multipleSelection.map(v => v.id)
      await this.deleteDataSource(ids)
      await this.queryDataSource()
    } catch (e) {
      console.log(e)
    }
  }

  mounted() {
    this.params = this.$route.params
    this.queryDataSource()
  }
}
</script>
<style lang="scss" scoped>
.el-form {
  height: 40px;
  box-shadow: 0px 1px 6px -2px rgb(51, 51, 51);
  padding: 0 10px;
}
</style> -->
